<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全管理台账,设备设施台账</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="设备名称">
                            <el-input placeholder="请输入" class="inputW" v-model="deviceName"></el-input>
                        </el-form-item>
                        <el-form-item label="使用证号">
                            <el-input placeholder="请输入" class="inputW" v-model="useNo"></el-input>
                        </el-form-item>
                        <el-form-item label="注册证号">
                            <el-input placeholder="请输入" class="inputW" v-model="registerNo"></el-input>
                        </el-form-item>
                        <el-form-item label="规格型号">
                            <el-input placeholder="请输入" class="inputW" v-model="model"></el-input>
                        </el-form-item>
                        <el-form-item label="厂内编号">
                            <el-input placeholder="请输入" class="inputW" v-model="deviceNo"></el-input>
                        </el-form-item>
                        <el-form-item label="检测状态">
                            <el-select class="inputW" v-model="checkState">
                                <el-option
                                        v-for="item in checkStateData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">新增设备</el-button>
                            <el-button type="success" @click="export_report">导出</el-button>
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                    <el-table-column prop="userName" label="责任人"></el-table-column>
                    <el-table-column prop="registerNo" label="注册证编号"></el-table-column>
                    <el-table-column prop="deviceNo" label="厂内编号"></el-table-column>
                    <el-table-column prop="lastCheckTime" label="上次检测日期">
                        <template slot-scope="scope" v-if="scope.row.lastCheckTime">
                            <el-tag size="medium">{{scope.row.lastCheckTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nextCheckTime" label="下次检测截止日期">
                        <template slot-scope="scope" v-if="scope.row.nextCheckTime">
                            <el-tag size="medium">{{scope.row.nextCheckTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkCycle" label="定检周期"></el-table-column>
                    <el-table-column prop="checkState" label="检测状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.checkState == '0'">
                                <el-tag size="medium" type="success">未检测</el-tag>
                            </div>
                            <div v-if="scope.row.checkState == '1'">
                                <el-tag size="medium" type="success">已检测</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stationName" label="操作" min-width="230px">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                            <el-button icon="el-icon-delete" round size="small"
                                       @click="removeItem(scope.row.Id)"></el-button>
                            <el-button type="primary" @click="addcheck(scope.row)" size="small">
                                新增检测记录
                            </el-button>
                            <el-button type="primary" @click="checkdata(scope.row.Id)" size="small">
                                检测记录
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row>

        </el-row>
        <el-dialog :title="editMod?'编辑台账':'新增台账'" :visible.sync="dialogFormVisible">
            <el-form :model="param" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item>
                    <el-form-item label="设备名称" :label-width="130" :rules="[
                             {required:true,message:'设备名称!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.deviceName" autocomplete="off" class="itemW"
                                  prop="deviceName"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="规格型号" :label-width="120" :rules="[
                             {required:true,message:'规格型号!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.model" autocomplete="off" class="itemW"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="生产厂家" :label-width="130" :rules="[
                             {required:true,message:'生产厂家!',trigger:'blur'}
                            ]">
                        <el-input v-model="param.produceBy" autocomplete="off" class="itemW"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="负责人" :label-width="120" :rules="[
                             {required:true,message:'设备负责人!',trigger:'blur'}
                            ]">
                    <el-select v-model="param.chargeBy" style="width: 200px" @change="select_status">
                        <el-option
                                v-for="item in Chargerlist"
                                :key="item.Id"
                                :label="item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                    <!--                    <el-input v-model="param.chargeBy" autocomplete="off" class="itemW"></el-input>-->
                </el-form-item>
                <el-form-item>
                    <el-form-item label="定检周期" :label-width="120"
                                  :rules="[{required:true,message:'定检周期',trigger:'blur'}]">
                        <el-input v-model="param.checkCycle" class="itemW" placeholder="月/次" type="number"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="运行场所" :label-width="130" :rules="[
                             {required:true,message:'运行场所!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.runPlace" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="注册证号" :label-width="130" :rules="[
                             {required:true,message:'注册证号!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.registerNo" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="使用证名称" :label-width="130" :rules="[
                             {required:true,message:'使用证名称!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.useCredit" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="使用证号" :label-width="130" :rules="[
                             {required:true,message:'使用证号!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.useNo" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="厂内编号" :label-width="130" :rules="[
                             {required:true,message:'厂内编号!',trigger:'blur'}
                            ]">
                    <el-input v-model="param.deviceNo" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="出厂日期" :label-width="130" :rules="[
                             {required:true,message:'出厂日期!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="param.outTime" placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="投用时间" :label-width="130" :rules="[
                             {required:true,message:'投用时间!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="param.useTime" placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>

                <el-form-item label="上次检测日期" :label-width="130" :rules="[
                             {required:true,message:'上次检测日期!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="param.lastCheckTime" placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>
                <!--                <el-form-item label="下次检测日期" :label-width="130" :rules="[-->
                <!--                             {required:true,message:'下次检测日期!',trigger:'blur'}-->
                <!--                            ]">-->
                <!--                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="param.nextCheckTime" placeholder="日期"-->
                <!--                                    style="width:200px"></el-date-picker>-->
                <!--                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submitClick">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="'新增检测记录'" :visible.sync="dialogcheckVisible">
            <el-form :model="checkparam" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item>
                    <el-form-item label="检测结果" :label-width="130" :rules="[
                             {required:true,message:'检测结果!',trigger:'blur'}
                            ]">
                        <el-input v-model="checkparam.checkResult" autocomplete="off" class="itemW"
                                  prop="checkResult" type="textarea" rows="3"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="检测日期" :label-width="130" :rules="[
                             {required:true,message:'检测日期!',trigger:'blur'}
                            ]">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="checkparam.checkTime"
                                        placeholder="日期"
                                        style="width:200px"></el-date-picker>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogcheckVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCheck">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="'检测记录'" :visible.sync="dialogcheckdataVisible">
            <el-table :data="checkDatalist" height="360" :stripe="true" :border="true" size="mini" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="checkResult" label="检测结果"></el-table-column>
                <el-table-column prop="checkTime" label="检测时间">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{scope.row.checkTime.replace("T"," ").substr(0,10)}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="checkpagesize" :total="checktotalCount"
                               :current-page.sync="checkpageno" @current-change="onCheckChangePage">
                </el-pagination>
            </div>
            <!--            <div slot="footer" class="dialog-footer">-->
            <!--                <el-button @click="dialogcheckdataVisible = false">确定</el-button>-->
            <!--                &lt;!&ndash;                <el-button type="primary" @click="submitCheck">确定</el-button>&ndash;&gt;-->
            <!--            </div>-->
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            dialogFormVisible: false,
            dialogcheckVisible: false,
            dialogcheckdataVisible: false,
            Eparam: {},
            param: {
                // Id: '',
                // deviceNo: '',
                // deviceName: '',
                // projectNo: '',
                // produceBy: '',
                // runPlace: '',
                // model: '',
                // useCredit: '',
                // lastCheckTime: '',
                // useTime: '',
                // checkState: '',
                // checkCycle: '',
                // registerNo: '',
                // useNo: '',
                // outTime: '',
                // chargeBy: '',
                // nextCheckTime: '',
                // lastCheckTime: ''
            },
            checkDatalist: {},
            checkparam: {
                deviceId: '',
                projectNo: '',
                checkResult: '',
                checkTime: ''
            },
            pagesize: 10,
            pageno: 1,
            totalCount: 0,

            checkDatalist: {},
            checkpagesize: 10,
            checkpageno: 1,
            checktotalCount: 0,
            deviceId: '',
            projectNo: '',
            deviceName: '',
            useNo: '',
            registerNo: '',
            model: '',
            checkState: '',
            deviceNo: '',
            editMod: false,
            Chargerlist: [],
            checkStateData: [{Name: '所有', Id: -1}, {Name: '已检测', Id: 1}, {Name: '未检测', Id: 0}]
        },
        created: function () {
            HttpUtil.get('User/Child').success((r) => {
                if (r.state == 0) {
                    vuePage.Chargerlist = r.data;
                } else {
                    vuePage.$message({type: 'error', message: '修改失败'})
                }
            })
            // SiteConfig.account.projiectNo
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            this.loadData();
        },
        methods: {
            select_status() {
                this.$forceUpdate();
            },
            close: function () {
                this.dialogFormVisible = false
                this.$set(this.tableData);
            },
            checkdata(Id) {
                if (!Id) {
                    this.$message({type: 'error', message: 'ID不能为空'});
                    return;
                } else {
                    this.deviceId = Id;
                }
                var param = {};
                param.pageno = this.checkpageno;
                param.pagesize = this.checkpagesize;
                // d6da8ca9ace4449dbb6795af03937154
                // SiteConfig.account.projectNo
                param.projectNo = SiteConfig.account.projectNo;
                param.deviceId = this.deviceId;
                HttpUtil.get('Devicecheckbill/List', param).success((res) => {
                    vuePage.checkDatalist = res.data;
                    vuePage.checktotalCount = res.total;
                    this.dialogcheckdataVisible = true;
                });
            },
            addcheck(row) {

                if (!row.Id) {
                    this.$message({type: 'error', message: 'ID不能为空'});
                    return;
                }
                this.dialogcheckVisible = true;
                this.checkparam.deviceId = row.Id;
                this.checkparam.lastCheckTime = row.lastCheckTime;
            },
            editClick(row) {
                this.param = Object.assign({},this.param, row);
                // this.param = row;
                this.param.chargeBy = parseInt(this.param.chargeBy);
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                var param = {};
                if (this.deviceName)
                    param.deviceName = this.deviceName;
                if (this.useNo)
                    param.useNo = this.useNo;
                if (this.registerNo)
                    param.registerNo = this.registerNo;
                if (this.model)
                    param.model = this.model;
                if (this.checkState != -1)
                    param.checkState = this.checkState;
                if (this.deviceNo)
                    param.deviceNo = this.deviceNo;
                if (SiteConfig.account.projectNo)
                    param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('Equipment/List', param).success((res) => {
                    vuePage.tableData = res.data;
                    vuePage.totalCount = res.total;
                });
            },
            addBtn: function () {
                this.editMod = false;
                // var obj = this.param;
                // for (key in obj) {
                //     this.param[key] = '';
                // }
                // this.form.reset()
                // this.param = [];
                this.param = {};
                this.dialogFormVisible = true;
                this.loadData();
            },
            submitCheck() {
                if (!this.checkparam.checkResult) {
                    this.$message({type: 'error', message: '检测结果不能为空'})
                    return;
                }
                if (!this.checkparam.checkTime) {
                    this.$message({type: 'error', message: '检测时间不能为空'})
                    return;
                }
                if (!((TimeUtil.dateDifference(this.checkparam.lastCheckTime, this.checkparam.checkTime)>0)&&this.checkparam.lastCheckTime)){
                    this.$message({type: 'error', message: '检测时间不能小于上次检测时间'})
                    return;
                }
                // SiteConfig.account.projectNo     d6da8ca9ace4449dbb6795af03937154
                this.checkparam.projectNo = SiteConfig.account.projectNo;

                HttpUtil.get('Devicecheckbill/Add', this.checkparam).success((r) => {
                    if (r.state == 0) {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        vuePage.loadData();
                        setTimeout(function () {
                            vuePage.dialogcheckVisible = false;
                        }, 1000)
                    } else {
                        vuePage.$message({type: 'error', message: '添加失败'})
                    }
                })

            },
            submitClick() {
                if (!this.param.deviceName) {
                    this.$message({type: 'error', message: '设备名称不能为空'})
                    return;
                }
                if (!this.param.model) {
                    this.$message({type: 'error', message: '规格型号不能为空'})
                    return;
                }
                if (!this.param.produceBy) {
                    this.$message({type: 'error', message: '生产厂家不能为空'})
                    return;
                }

                if (!this.param.runPlace) {
                    this.$message({type: 'error', message: '运行场所不能为空'})
                    return;
                }
                if (!this.param.registerNo) {
                    this.$message({type: 'error', message: '注册证号不能为空'})
                    return;
                }
                if (!this.param.useCredit) {
                    this.$message({type: 'error', message: '使用证名称不能为空'})
                    return;
                }
                if (!this.param.useNo) {
                    this.$message({type: 'error', message: '使用证号不能为空'})
                    return;
                }
                if (!this.param.deviceNo) {
                    this.$message({type: 'error', message: '厂内编号不能为空'})
                    return;
                }
                if (!this.param.outTime) {
                    this.$message({type: 'error', message: '出厂日期不能为空'})
                    return;
                }
                if (!this.param.useTime) {
                    this.$message({type: 'error', message: '投用时间不能为空'})
                    return;
                }
                if (!this.param.chargeBy) {
                    this.$message({type: 'error', message: '设备负责人不能为空'})
                    return;
                }
                if (!this.param.lastCheckTime) {
                    this.$message({type: 'error', message: '上次检测时间不能为空'})
                    return;
                }
                // if (!this.param.nextCheckTime) {
                //     this.$message({type: 'error', message: '下次检测时间不能为空'})
                //     return;
                // }
                if (!this.param.checkCycle) {
                    this.$message({type: 'error', message: '定检周期不能为空'})
                    return;
                }

                var oDate1 = new Date(this.param.useTime);
                var oDate2 = new Date(this.param.outTime);
                if (oDate1.getTime() < oDate2.getTime()) {
                    this.$message({type: 'error', message: '投用时间不能小于出厂时间'})
                    return;
                }


                this.param.checkState = '0';
                if (vuePage.editMod) {
                    HttpUtil.get('Equipment/Update', this.param).success((r) => {
                        if (r.state == 0) {
                            this.totalCount = r.total;
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)

                        } else {
                            vuePage.$message({type: 'error', message: '修改失败'})
                        }
                    })
                } else {
                    this.param.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('Equipment/Add', this.param).success((r) => {
                        if (r.state == 0) {
                            this.totalCount = r.total;
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                            vuePage.loadData();
                            setTimeout(function () {
                                vuePage.dialogFormVisible = false;
                            }, 1000)
                        } else {
                            vuePage.$message({type: 'error', message: '添加失败'})
                        }
                    })
                }

            },
            removeItem: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('Equipment/Delete', {Id: id}).success((r) => {
                        if (r.state == 0) {
                            vuePage.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vuePage.loadData();
                        } else {
                            vuePage.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            onCheckChangePage(page) {
                this.checkpageno = page;
                this.checkdata(this.deviceId);
            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.loadData();
            },
            onCheckbox: function (row) {
            },
            export_report: function () {
                HttpUtil.get('Equipment/ExportEquipment', {projectNo: SiteConfig.account.projectNo}).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            }
        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
